<template>
  <u-popup :show="isCancel" mode="center" :round="10" zIndex="10076">
    <view class="popup_view">
      <view class="top">
        <text>{{ title }}</text>
        <uni-icons type="close" size="20" class="close_icon" @click="closeCancel"></uni-icons>
      </view>
      <view class="center">
        <text v-if="status == 0">
          该订单确认后不可在线取消。若未入园，请拨
          <text class="tel" @click="callTel">110</text>
        </text>
        <view v-if="status == 1" class="feiyong">
          <view class="feiyong1 f_c_sb">
            <view>预定总额</view>
            <view>在线付<text style="color: #FF841C;">￥{{ feiyongObj.totalPrice }}</text></view>
          </view>
          <view class="feiyong1">
            <view v-for="(i, index) in feiyongObj.priceDetailsVos" :key="index" class="f_c_sb">
              <text>{{ i.menpiaoCategoryName }}</text>
              <text>{{ i.orderNum }}张</text>
              <text>￥{{ i.orderPrice }}</text>
            </view>
          </view>

        </view>
      </view>
      <view class="bottom" @click="closeCancel">
        <text>确定</text>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    isCancel: {
      type: Boolean,
    },
    // 费用明细
    feiyongObj: {
      type: Object,
      default: () => { }
    },

    // 判断什么类型的弹窗
    status: {
      type: Number,
    },
  },
  methods: {
    // 打电话
    callTel() {
      uni.makePhoneCall({
        phoneNumber: "114",
      });
    },

    // 关闭
    closeCancel() {
      this.$emit("close-cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
.f_c_sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.popup_view {
  width: 686rpx;
  background: #ffffff;
  border-radius: 16rpx;

  text-align: center;
  display: flex;
  flex-direction: column;

  color: #0e9589;

  .top {
    position: relative;
    text-align: center;
    height: 104rpx;
    line-height: 104rpx;
    border-bottom: 2rpx solid #eaeaea;
    font-size: 32rpx;
    color: #333333;

    .close_icon {
      position: absolute;
      right: 32rpx;
    }
  }

  .center {
    font-size: 28rpx;
    padding: 34rpx 0;
    color: #666666;

    .tel {
      color: #0e9589;
      text-decoration: underline;
    }

    .feiyong {
      .feiyong1 {
        padding: 8rpx 30rpx;
      }
    }
  }

  .bottom {
    border-top: 2rpx solid #eaeaea;
    height: 98rpx;
    line-height: 98rpx;
    font-size: 32rpx;
  }
}
</style>
